<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">

    <body>
        <img src="./img/001.PNG" alt="">
        <img src="./img/002.PNG" alt="">
        <img src="./img/003.PNG" alt="">
        <img src="./img/004.PNG" alt="">
        <img src="./img/005.PNG" alt="">
        <img src="./img/006.PNG" alt="">
        <img src="./img/007.PNG" alt="">
        <img src="./img/008.PNG" alt="">
        <img src="./img/009安装第三方插件babel.PNG" alt="">
        <img src="./img/010安装第三方插件babel_polyfill.PNG" alt="">
        <img src="./img/011.png" alt="">
        <img src="./img/012 npx babel-node.PNG" alt="">
        <img src="./img/013 默认导出与导入.png" alt="">
        <img src="./img/013_1.png" alt="">
        <img src="./img/013_2.png" alt="">
        <img src="./img/014.png" alt="">
        <div>
            <h3>默认导出只能有一个</h3>
        </div>
        <img src="./img/015.png" alt="">
        <img src="./img/015_1.png" alt="">
        <img src="./img/015_2.png" alt="">
        <img src="./img/015_3.png" alt="">
        <img src="./img/015_4.png" alt="">
        <img src="./img/016.png" alt="">
        <img src="./img/017.png" alt="">
        <img src="./img/018.png" alt="">
        <img src="./img/019.png" alt="">
        <img src="./img/020.png" alt="">
        <img src="./img/021.png" alt="">
        <img src="./img/022.png" alt="">
        <img src="./img/023.png" alt="">
        <img src="./img/024.png" alt="">
        <img src="./img/025.png" alt="">
        <img src="./img/026.png" alt="">
        <img src="./img/027.png" alt="">
        <img src="./img/028.png" alt="">
        <img src="./img/028_1.png" alt="">
        <img src="./img/029.png" alt="">
        <img src="./img/029_1.png" alt="">
        <img src="./img/030.png" alt="">
        <img src="./img/031.png" alt="">
        <img src="./img/032.png" alt="">
        <img src="./img/033.png" alt="">
        <img src="./img/034.png" alt="">
        <img src="./img/035.png" alt="">
        <img src="./img/036.png" alt="">
        <img src="./img/037.png" alt="">
        <img src="./img/038 配置打包的入口出口.png" alt="">
        <div>
            <h3>遇到问题, 无法配置出口, 没有生成bundle.js文件(实际原因未加载配置文件) 开始考虑webpack版本高, 降低webpack和webpack-cli版本</h3>
        </div>
        <img src="./img/039 降低webpack版本.png" alt="">
        <img src="./img/040.png" alt="">
        <div>
            <h3>新建项目</h3>
        </div>
        <img src="./img/041 初始化webpack_study02.png" alt="">
        <img src="./img/042 新建src源代码目录.png" alt="">
        <img src="./img/043.png" alt="">
        <img src="./img/044 pakage.json里的jquery依赖.png" alt="">
        <div>
            <h3>重新安装低版本webpack webpack-cli</h3>
        </div>
        <img src="./img/045 安装对应版本的webpack和webpack-cli.png" alt="">
        <img src="./img/046配置文件.png" alt="">
        <img src="./img/047 添加dev脚本.png" alt="">
        <div>
            <h3>nodejs v18与 webpack 4.29.0 有兼容性问题 npm run dev Error: error:0308010C:digital envelope routines::unsupported</h3>
        </div>
        <img src="./img/047_1解决版本问题.png" alt="">
        <img src="./img/048.png" alt="">
        <img src="./img/049.png" alt="">
        <img src="./img/050.png" alt="">
        <img src="./img/051.png" alt="">
        <img src="./img/052.png" alt="">
        <img src="./img/053.png" alt="">
        <img src="./img/054.png" alt="">
        <div>
            <h3>为了让index.js修改代码生效, 每一次修改完都要进行一次打包处理, 太麻烦了</h3>
            <br />
            <h3>需要配置webpack的自动打包功能

            </h3>
        </div>
        <div>
            <h3>访问网站根路径就能看到网页</h3>
            <br />
            <h3>需要配置html-webpack-plugin, 将index.html复制到项目根目录下</h3>
        </div>
        <div>
            <h2>为了解决版本匹配问题, 重新安装低版本node开始</h2>
        </div>
        <img src="./images/001.png" alt="">
        <img src="./images/002.png" alt="">
        <img src="./images/003.png" alt="">
        <img src="./images/004.png" alt="">
        <img src="./images/005.png" alt="">
        <img src="./images/006.png" alt="">
        <img src="./images/007.png" alt="">
        <img src="./images/008.png" alt="">
        <img src="./images/009.png" alt="">
        <img src="./images/010.png" alt="">
        <img src="./images/011.png" alt="">
        <img src="./images/012.png" alt="">
        <img src="./images/013.png" alt="">
        <img src="./images/014.png" alt="">
        <img src="./images/015.png" alt="">
        <img src="./images/016.png" alt="">
        <img src="./images/017.png" alt="">
        <img src="./images/018.png" alt="">
        <img src="./images/019.png" alt="">
        <img src="./images/020.png" alt="">
        <img src="./images/021.png" alt="">
        <img src="./images/022.png" alt="">
        <img src="./images/023.png" alt="">

    </body>

</html>